<template>
	<el-row :gutter="40">
		<el-col v-if="!form.id">
			<el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
		</el-col>
		<template v-else>
			<el-col :lg="24">
				<h2>{{form.meta.title || "新增菜单"}}</h2>
				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
					<el-form-item label="显示名称" prop="meta.title">
						<el-input v-model="form.meta.title" clearable placeholder="菜单显示名字" style="width: 30rem;"></el-input>
					</el-form-item>
					<el-form-item label="上级菜单" prop="parentId">
						<el-cascader v-model="form.parentId" :options="menuOptions" :props="menuProps"
							:show-all-levels="false" placeholder="顶级菜单"></el-cascader>
					</el-form-item>
					<el-form-item label="类型" prop="meta.type">
						<el-radio-group v-model="form.meta.type">
							<el-radio-button label="menu">菜单</el-radio-button>
							<el-radio-button label="iframe">Iframe</el-radio-button>
							<el-radio-button label="link">外链</el-radio-button>
							<el-radio-button label="button">按钮</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="别名" prop="name" v-show="isShow.name">
						<el-input v-model="form.name" clearable placeholder="菜单别名" style="width: 30rem;"></el-input>
						<span style="color: #999;">系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏</span>
					</el-form-item>
					<el-form-item label="权限标识" prop="code">
						<el-input v-model="form.code" clearable placeholder="权限标识" style="width: 30rem;"></el-input>
						<span style="color: #999;">格式为：模板:表:功能，如：sys:user:add</span>
					</el-form-item>
					<el-form-item label="菜单图标" prop="meta.icon" v-show="isShow.metaIcon">
						<sc-icon-select v-model="form.meta.icon" clearable></sc-icon-select>
					</el-form-item>
					<el-form-item label="路由地址" prop="path" v-show="isShow.metaIcon">
						<el-input v-model="form.path" clearable placeholder="" style="width: 30rem;"></el-input>
                        <span style="color: #999;">当菜单类型为【iframe或者link】时，将路由地址设置为目标地址即可，并且视图路径可不填</span>
					</el-form-item>
					<el-form-item label="视图" prop="component" v-show="isShow.component">
						<el-input v-model="form.component" clearable placeholder="" style="width: 30rem;">
							<template #prepend>views/</template>
						</el-input>
						<span style="color: #999;">如父节点、链接或Iframe等没有视图的菜单不需要填写</span>
					</el-form-item>
					<el-form-item label="是否隐藏" prop="meta.hidden" v-show="isShow.metaHidden">
						<el-checkbox v-model="form.meta.hidden">隐藏菜单</el-checkbox>
						<el-checkbox v-model="form.meta.hiddenBreadcrumb">隐藏面包屑</el-checkbox>
						<span style="color: #999;">菜单不显示在导航中，但用户依然可以访问，例如详情页</span>
					</el-form-item>
					<el-form-item label="排序" prop="sort" v-show="isShow.sort">
						<el-input-number v-model="form.sort" clearable placeholder="排序号" style="width: 15rem;"></el-input-number>
						<span style="color: #999;">整数---升序,越小越靠前</span>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="save" :loading="loading">保 存</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</template>
	</el-row>
</template>
<script>
	import scIconSelect from '@/components/scIconSelect';
	export default {
		components: {
			scIconSelect,
		},
		props: {
			menu: { type: Object, default: () => {} },
		},
		data(){
			return {
				form: {
					id: "",
					parentId: "",
					name: "",
					code: "",
					path: "",
					component: "",
					sort: 100,
					meta:{
						title: "",
						icon: "",
						type: "menu"
					},
				},
				menuOptions: [],
				menuProps: {
					value: 'id',
					label: 'title',
					checkStrictly: true,
					roleId: "",
					defKeys: [],
					multiple: false,
				},
				rules: [],
				loading: false,
				isShow:{
					name: true,metaIcon: true,path: true,component: true,metaHidden: true,sort: true,
				},
			}
		},
		watch: {
			menu: {
				handler(){
					this.menuOptions = this.treeToMap(this.menu);
				},
				deep: true
			},
			'form.meta.type'(val){
				console.log(val);
				if(val == 'button'){
					this.isShow.metaIcon=false;this.isShow.name=false;this.isShow.path=false;
					this.isShow.component=false;this.isShow.metaHidden=false;this.isShow.sort=false;
				}else{
					this.isShow.metaIcon=true;this.isShow.name=true;this.isShow.path=true;
					this.isShow.component=true;this.isShow.metaHidden=true;this.isShow.sort=true;
				}
			},
		},
		mounted() {

		},
		methods: {
			//简单化菜单
			treeToMap(tree){
				const map = [];
				tree.forEach(item => {
					var obj = {
						id: item.id,
						parentId: item.parentId,
						title: item.meta.title,
						children: item.children&&item.children.length>0 ? this.treeToMap(item.children) : null
					};
					map.push(obj);
				});
				return map;
			},
			//保存
			async save(){
				this.loading = true;
				let parentIdsv = this.form.parentId+"";
				let parentIdArr = parentIdsv.split(',');
				this.form.parentId = parentIdArr[parentIdArr.length-1];
				var res = await this.$API.system.menu.save.post(this.form);
				this.loading = false;
				if(res.code === 2000){
					this.$message.success("保存成功");
				}else{
					this.$message.warning(res.message);
				}
			},
			//表单注入数据
			setData(data, pid){
				this.form = data;
				this.form.parentId = pid;
			},
		}
	}
</script>

<style scoped>
	h2 {font-size: 17px;color: #3c4a54;padding:0 0 30px 0;}
	[data-theme="dark"] h2 {color: #fff;}
</style>
